<template>
  <view class="common-content">
    <scroll-view scroll-y="true" class="palne-main" :class="{ ovhidden: show }">
      <image
        class="bg"
        src="../../static/order/hotel-bg.png"
        mode="aspectFit"
      ></image>
      <view class="search">
        <view class="search-from">
          <view class="choose-travel border-bottom">
            <span class="text">出差申请单</span>
            <view @click="selectApplication()" class="text_app">
              <span
                class="text_app"
                :class="[{ active: application.applicationId }]"
                >{{ application.applicationName }}</span
              >
              <image
                src="../../static/order/arrow.png"
                mode="aspectFit"
              ></image>
            </view>
          </view>
          <view class="city">
            <p @click="selectCityOpen()" :class="{cityname:!selectCity.name}">
              {{ selectCity.name ? selectCity.name : "请选择城市" }}
            </p>
            <view class="img" @click="getCurrentPosition()">
              <image
                src="../../static/order/position.png"
                mode="aspectFit"
              ></image>
              <p>当前位置</p>
            </view>
          </view>
          <view class="choose-travel">
            <span class="text">入住时间</span>
            <view @click="open">
              <span
                :class="[{ active: application.applicationId }]"
                class="text_app"
                >{{ application.applicationDate }}</span
              >
              <image
                src="../../static/order/arrow.png"
                mode="aspectFit"
              ></image>
            </view>
          </view>
          <view
            @click="searchList()"
            class="btn"
            :class="[{ 'active-btn': application.applicationId }]"
            >查询</view
          >
          <view
            class="history"
            v-if="locationHistory && locationHistory.length > 0"
          >
            <p>
              <view
                v-for="(item, index) in locationHistory"
                :key="`locationHistory${index}`"
                @click.native="selectHistory(index)"
                class="history_item"
                >{{ item.name }}</view
              >
            </p>
            <view @click="clearHistory()">清除历史</view>
          </view>
        </view>
        <view class="standard" v-if="stantaders && stantaders.length > 0">
          <h3><span></span>我的出差标准</h3>
          <view>
            <h4>酒店</h4>
            <view v-for="(item, index) in stantaders" :key="index">
              <h5>{{ item.regionName }}</h5>
              <p>
                <span>酒店星级</span>
                <span>{{ hotelStandater[item.travelLimit] }}</span>
              </p>
              <p>
                <span>房费限制</span>
                <span>需低于{{ item.amountLimit }}元</span>
              </p>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <citySelect ref="citySelect" @citySelect="citySelect" @open="openCity" />
  </view>
</template>

<script>
import { dataFormat2 } from "@/utils/dateFun.js";
import citySelect from "../components/selectCity/index.vue";
import { getStantader } from "@/api/hotel.js";

export default {
  components: {
    citySelect,
  },
  data() {
    return {
      hotelStandater: {
        10: "不限星级",
        "02": "二星及以下",
        "03": "三星及以下",
        "04": "四星及以下",
        "05": "五星及以下",
      },
      show: false,
      application: {
        applicationName: "请选择",
        detinationResult: [{ placeName: "出发地" }],
        originResult: [{ placeName: "目的地" }],
        applicationDate: "请选择",
        data: {},
      },
      locationHistory: [],
      nowPosition: "北京市东城区民生金融中心",
      cityType: "",
      selectCity: { name: "", id: "" },
      startDate: "1",
      appAddress: [],
      stantaders: [],
    };
  },
  created() {
    this.startDate = dataFormat2();
    // this.getCurrentPosition();
    uni.getStorage({
      key: "locationHistory",
      success: (res) => {
        console.log(res);
        this.locationHistory = res.data;
      },
    });
    this.getStantader();
  },
  watch: {
    application: {
      deep: true,
      handler(nval, old) {
        if (nval.data.applicationId != old.data.applicationId) {
          this.selectCity = {
            name: nval.data.destinationName.split(",")[0],
            id: nval.data.destination.split(",")[0],
          };
          this.appAddress = [
            {
              name: nval.data.destinationName,
              id: nval.data.destination,
            },
            {
              name: nval.data.originName,
              id: nval.data.origin,
            },
          ];
        }
      },
    },
  },
  computed: {},
  onLoad: function (option) {
    my.hideBackHome();

    uni.getStorage({
      key: "locationHistory",
      success: (res) => {
        console.log(res);
        this.locationHistory = res.data;
      },
    });
  },
  methods: {
    async getStantader() {
      const res = await getStantader();
      if (res[1] && res[1].data) {
        this.stantaders = res[1].data.filter((item) => {
          return item.regionName && item.regionName.length > 0;
        });
      }
    },
    openCity(open) {
      this.show = open;
    },
    getCurrentPosition() {
      const key = "eb2728f39a403ecab1ff3e945c7df049";
      uni.getLocation({
        type: "wgs84",
        altitude: true, //开启高精度定位
        success: (res) => {
          uni.request({
            url: `https://restapi.amap.com/v3/geocode/regeo?location=${res.longitude},${res.latitude}&key=${key}&radius=1000&extensions=all`,
            data: {},
            success: (res2) => {
              this.selectCity = {
                name: res2.data.regeocode.addressComponent.city,
                id: res2.data.regeocode.addressComponent.adcode,
              };
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    open() {
      if (!this.application.applicationId) {
        uni.showToast({
          title: "请选择出差申请单",
          icon: "none",
          duration: 500,
        });
        return;
      }
      uni.navigateTo({
        url:
          "/pages/calendar/index?showConfirm=true&type=range&startTime=" +
          this.application.checkInDate +
          "&endTime=" +
          this.application.checkOutDate,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          slectDate: (data) => {
            this.application.applicationDate = data[0] + "至" + data[1];
            this.application.checkInDate = data[0];
            this.application.checkOutDate = data[1];
          },
        },
      });
    },
    confirm(e) {
      this.application.applicationDate = e.range.before + "至" + e.range.after;
    },
    selectApplication() {
      uni.navigateTo({
        url: "/pages/order/applicationList",
      });
    },
    searchList() {
      if (!this.application.applicationId) {
        uni.showToast({
          title: "请选择出差申请单",
          icon: "none",
          duration: 500,
        });
        return;
      }
      if (!this.selectCity.name) {
        uni.showToast({
          title: "请选择入住地",
          icon: "none",
          duration: 500,
        });
        return;
      }
      if (!this.application.applicationDate) {
        uni.showToast({
          title: "请选择入住时间",
          icon: "none",
          duration: 500,
        });
        return;
      }
      //实现 有的话，提到第一个
      //没有的话，长度不够3放到第一个
      if (!this.locationHistory) {
        this.locationHistory = [];
      }
      if (this.locationHistory.length == 0) {
        this.locationHistory.push(this.selectCity);
      } else {
        for (let index = 0; index < this.locationHistory.length; index++) {
          let element = this.locationHistory[index];
          if (element.name != this.selectCity.name) {
            this.locationHistory = this.locationHistory.shift(this.selectCity);
          }
        }
      }
      let length = this.locationHistory.length;
      if (length > 3) {
        this.locationHistory = this.locationHistory.slice(0, 3);
      }
      uni.setStorage({
        key: "locationHistory",
        data: this.locationHistory,
        success: function () {
          console.log("success");
        },
      });

      uni.navigateTo({
        url: this.getHotelListUrl(),
      });
    },
    getHotelListUrl() {
      let path =
        "hotelList?checkInDate=" +
        this.application.checkInDate +
        "&checkOutDate=" +
        this.application.checkOutDate +
        "&cityID=" +
        this.selectCity.id +
        "&applicationId=" +
        this.application.data.applicationId;
      return "/pages/webViewh5/index?path=" + encodeURIComponent(path);
    },

    selectCityOpen() {
      if (!this.application.applicationId) {
        uni.showToast({
          title: "请选择出差申请单",
          icon: "none",
          duration: 500,
        });
        return;
      }
      this.show = true;
      this.$refs.citySelect.open("sleep", this.appAddress);
    },
    selectHistory(index) {
      this.selectCity = this.locationHistory[index];
    },
    citySelect(item) {
      this.selectCity = item;
    },
    clearHistory() {
      this.locationHistory = [];
      uni.setStorage({
        key: "locationHistory",
        data: [],
        success: function () {
          console.log("success");
        },
      });
    },
    change(e) {},
  },
};
</script>

<style lang="scss">
@import "../../static/css/mixin.scss";

.border-bottom {
  @include border_bottom1px();
}
.common-content {
  height: 100vh;
  width: 100vw;
}
.ovhidden {
  overflow: hidden;
  height: 100vh;
}
.palne-main {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  .active {
    color: #333333;
  }
  .bg {
    width: 100%;
    height: 676rpx;
  }
  .search {
    margin: auto;
    position: absolute;
    top: 290rpx;
    left: 0;
    right: 0;
    .search-from {
      width: 686rpx;
      height: 590rpx;
      background: #fff;
      margin: 0 auto;
      box-shadow: 0px 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
      border-radius: 20rpx;
      padding: 32rpx;
      display: flex;
      flex-direction: column;
      .choose-travel {
        height: 110rpx;
        line-height: 110rpx;
        display: flex;
        justify-content: space-between;
        .text {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          line-height: 110rpx;
        }

        & > view {
          color: #c4c4c4;
          display: flex;
          align-items: center;
          .text_app {
            font-size: 32rpx;
            margin-right: 33rpx;
          }
        }
        image {
          width: 16rpx;
          height: 28rpx;
          vertical-align: middle;
        }
      }
      .city {
        height: 160rpx;
        @include border_bottom1px();
        display: flex;
        align-items: center;
        .cityname {
          color: #c4c4c4 !important;
        }
        & > p {
          font-size: 48rpx;
          color: #333;
          line-height: 67rpx;
          height: 48rpx;
          font-weight: 600;
          flex: 1;
        }
        & > .img {
          width: 120rpx;
          text-align: center;
          image {
            width: 33rpx;
            height: 40rpx;
            margin-bottom: 4rpx;
          }
          p {
            font-size: 20rpx;
            color: #333;
          }
        }
      }
      .btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: #ffe6b2;
        border-radius: 8rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-top: 13rpx;
        margin-bottom: 20rpx;
      }
      .active-btn {
        background: #ffa900 !important;
      }
      .history {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        & > p {
          flex: 1;
          white-space: nowrap;
          overflow-x: scroll;
          color: #999;
          /* 隐藏滚动条 */
          scrollbar-width: none; /* firefox */
          -ms-overflow-style: none; /* IE 10+ */
          .history_item {
            margin-right: 50rpx;
          }
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
        & > view {
          background: #ffffff;
          padding: 0 20rpx;
          color: #333333;
        }
      }
    }
    .standard {
      width: 686rpx;
      margin: 50rpx auto;
      & > h3 {
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 24rpx;
        span {
          display: inline-block;
          width: 6rpx;
          height: 30rpx;
          background: #d8d8d8;
          margin-right: 26rpx;
        }
      }
      & > view {
        &:last-child {
          background: #ffffff;
          box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
          border-radius: 20rpx;
          padding: 32rpx;
          & > h5 {
            font-size: 30rpx;
            margin: 6px 0 6px;
          }
          h4 {
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 30rpx;
            span {
              font-size: 24rpx;
              color: #ffa900;
              border: 1px solid #ffa900;
              border-radius: 4rpx;
              padding: 0rpx 4rpx;
              margin-left: 15rpx;
            }
          }
          p {
            display: flex;
            justify-content: space-between;
            line-height: 64rpx;
            span {
              font-size: 28rpx;
              &:first-child {
                color: #333;
              }
              &:last-child {
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
.vue-ref {
  height: 70vh;
}
</style>